<template>
  <div>
      <top-bar></top-bar>
      <left-bar :datas='data'></left-bar>
      <div class="orders system">
              <home-bar :currentPage='currentPage'></home-bar>
              <div class="order-main system-main">
                  <div class="main-position">
                    首页  >   客户管理  >   客户列表
                    <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                  </div>
                  <div class="main-height"></div>
                  <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/clientlist" @click.native="addPath('/clientlist','客户管理')">
                                <li  class="active">客户列表</li>
                            </router-link>
                            <router-link to="/customertransactions" @click.native="addPath('/customertransactions','客户管理')">
                                <li>客户交易管理</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="customer-main">
                      <div class="customer-main-top clear">
                        <div class="fl">批量导出</div>
                        <div class="fl" @click="screen()">筛选</div>
                        <div class="fl customer-main-clear">清空筛选</div>
                      </div>
                      <div class="customer-mains">
                        <table>
                            <tr>
                              <td>
                                    <el-checkbox   ></el-checkbox>
                              </td>
                              <td>序号</td>
                              <td>客户头像</td>
                              <td>客户名称</td>
                              <td>客户账号</td>
                              <td>客户星级</td>
                              <td>客户类型</td>
                              <td>初始交易时间</td>
                              <td>操作</td>
                            </tr>
                            <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                              <th>
                                 <el-checkbox  ></el-checkbox>
                              </th>
                              <th>{{item.num}}</th>
                              <th>
                                <img :src=item.img alt="">
                              </th>
                              <th>{{item.name}}</th>
                              <th>{{item.account}}</th>
                              <th>{{item.star}}</th>
                              <th>{{item.type}}</th>
                              <th>{{item.time}}</th>
                              <th v-if="item.types">
                                <span @click="frozen()">冻结</span>
                              </th>
                              <th v-else>
                                <span class="customer-active">已冻结</span>
                                <span @click="thaw()">解冻</span>
                              </th>
                            </tr>
                        </table>
                      </div>
                      <div class="orderBotom">
                          <div class="orderBotomLeft">
                          <el-checkbox class="fl">全选</el-checkbox>
                          <span class="reverseSelected">反选</span>
                          <span class="deleteSelected">删除选中</span>
                          </div>
                          <div class="orderBotomRight">
                              <el-pagination
                                      @size-change="handleSizeChange"
                                      @current-change="handleCurrentChange"
                                      :current-page="currentPage4"
                                      :page-sizes="[100, 200, 300, 400]"
                                      :page-size="100"
                                      layout="total, sizes, prev, pager, next, jumper"
                                      :total="400">
                              </el-pagination>
                          </div>
                      </div>
                    </div>
                 </div>
              </div>
             <div class="system-menban" v-show="showSystemPopup">
             </div>
             <div class="systemPopup" v-show="showSystemPopup">
                <div class="topTitle">
                     <span>{{systemPopupTitle}}</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
               <div class="customer-systemPopup-con">
                  <div class="customer-systemPopup-cons clear">
                    <div class="fl">客户类型</div>
                    <div class="fl customer-sel">
                      <el-select v-model="value" placeholder="请选择类型" class="customer-recommend-sel"  >
                          <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="customer-systemPopup-cons clear">
                    <div class="fl">用户名称搜索</div>
                    <div class="fl customer-sel">
                      <el-input
                          class="system-messagebox1-input2"
                          v-model="promptMoney"
                          clearable>
                      </el-input>
                    </div>
                  </div>
                  <div class="customer-systemPopup-cons clear">
                    <div class="fl">初始交易时间</div>
                    <div class="fl customer-sel">
                       <el-date-picker
                        v-model="date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions2">
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="customer-systemPopup-btn clear">
                    <div class="fl">确认</div>
                    <div class="fl" @click="hideSystemPopup">取消</div>
                  </div>
               </div>
             </div>
       </div>
  </div>
</template>

<script>
import topBar from "../../public/top";
import leftBar from "../../public/left";
import homeBar from "../../public/homebar";

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "customerManagement",
      currentPage: { path: "/clientlist", name: "客户管理" },
      date: "",
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      listData: [
        {
          num: "01",
          img: "static/images/end_user.png",
          name: "星宇大药房",
          account: "15623568956",
          star: "5星级",
          type: "普通用户",
          time: "2018/04/02",
          types: 0
        },
        {
          num: "02",
          img: "static/images/end_user.png",
          name: "新贵药点",
          account: "15623568956",
          star: "5星级",
          type: "普通用户",
          time: "2018/04/02",
          types: 1
        },
        {
          num: "03",
          img: "static/images/end_user.png",
          name: "星宇大药房01",
          account: "15623568956",
          star: "5星级",
          type: "普通用户",
          time: "2018/04/02",
          types: 0
        },
        {
          num: "04",
          img: "static/images/end_user.png",
          name: "星宇大药房02",
          account: "15623568956",
          star: "5星级",
          type: "普通用户",
          time: "2018/04/02",
          types: 1
        }
      ],
      currentPage4: 4,
      showSystemPopup: false,
      systemPopupTitle: "筛选条件",
      showScreeningPopup: false,
      cheackAllChecked: false,
      checkArr: [],
      checkCompleteArr: []
    };
  },
  methods: {
    thaw() {
      //解冻
      this.$confirm("此操作将解冻该账户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "解冻成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解冻"
          });
        });
    },
    frozen() {
      //冻结
      this.$confirm("此操作将冻结该账户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "冻结成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消冻结"
          });
        });
    },
    screen() {
      this.showSystemPopup = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    clickScreeningPopup() {
      this.showSystemPopup = true;
      this.showScreeningPopup = true;
    },
    hideSystemPopup() {
      this.showSystemPopup = false;
      this.showScreeningPopup = false;
    },
    checkAllFun() {
      //实现全选（1/5）
      var _this = this;
      this.checkArr = [];
      if (this.cheackAllChecked) {
        this.tableList.forEach(function(item, index) {
          if (index >= 0) {
            _this.checkArr.push(item.id);
          }
        });
      }
    },
    reverseChecked() {
      //实现反选（2/5）
      var _this = this;
      var changeArr = [];
      this.tableList.forEach(function(item, index) {
        if (index >= 0) {
          changeArr.push(item.id);
        }
      });
      this.removeByValue(changeArr, this.checkArr);
    },
    removeByValue(changearr, checkarr) {
      //反选过滤函数（3/5）
      var _this = this;
      for (var j = 0; j < checkarr.length; j++) {
        for (var i = 0; i < changearr.length; i++) {
          if (changearr[i] === checkarr[j]) {
            changearr.splice(i, 1);
            break;
          }
        }
      }
      this.checkArr = changearr;
      if (changearr.length <= _this.checkCompleteArr.length) {
        this.cheackAllChecked = false;
      }
      if (changearr.length === _this.checkCompleteArr.length) {
        this.cheackAllChecked = true;
      }
    },
    changevalue() {
      //选项的change事件（4/5）
      var _this = this;
      if (this.checkArr.length <= _this.checkCompleteArr.length) {
        this.cheackAllChecked = false;
      }
      if (this.checkArr.length === _this.checkCompleteArr.length) {
        this.cheackAllChecked = true;
      }
    },
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    }
  },
  mounted() {
    //全选或反选用到的完整数组值（5/5）
    // var _this = this;
    // this.tableList.forEach(function(item, index) {
    //   if (index >= 0) {
    //     _this.checkCompleteArr.push(item.id);
    //   }
    // });
  }
};
</script>

<style lang="less">
@import "customer.less";
</style>

